<template>
  <a-modal @cancel="close" title="审核改派" width="45vw" v-model:visible="visible" unmount-on-close>
    <div v-if="records">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions layout="inline-horizontal">
            <a-descriptions-item label="推荐人" :span="3"
              >{{ records.referenceUserName }} {{ records.referenceUserPhone }}</a-descriptions-item
            >
            <a-descriptions-item label="改派原因">
              <span style="word-break: break-all">
                {{ records.reassignmentReason }}
              </span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <a-divider :margin="16" />
      <page-form :model="form" layout="vertical" :rules="rules" ref="formRef">
        <page-form-row>
          <page-form-item label="审核结果" size="1/2">
            <a-radio-group v-model="form.examineStatus" @change="radioChange">
              <a-radio :value="item.value" v-for="item in vEnumList" :key="item.value">
                {{ item.label }}
              </a-radio>
            </a-radio-group>
          </page-form-item>
          <!-- 同意 -->
          <page-form-item field="staffId" :label="labelName" required size="1/2" v-if="form.examineStatus == 1">
            <remote-select
              v-model="form.staffId"
              :params="{
                oldId: defaultStaffId ? defaultStaffId : undefined,
                siteIdList: [orderInfo.siteId],
              }"
              type="staff_authOrg"
            />
          </page-form-item>
          <!-- 拒绝 -->
          <page-form-item field="refuseReassignmentReason" label="拒绝原因" required size="1/2" v-else>
            <a-textarea placeholder="请输入" :max-length="100" v-model="form.refuseReassignmentReason" auto-size />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="close">关闭</a-button>
        <a-button type="primary" @click="handleBeforeOk" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="reviewReassignmentModal">
  import { ref } from 'vue'
  import { examineReassignment } from '@/api/business/workorder'
  import { Message } from '@arco-design/web-vue'
  // emit 事件
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  const orderInfo = ref({})
  const labelName = ref('')
  const records = ref({})
  const form = ref({
    isEnabled: 1,
  })
  const vEnumList = ref([
    { value: 1, label: '同意' },
    { value: 0, label: '拒绝' },
  ])
  const rules = {
    staffId: [{ required: true, message: '请选择交车人' }],
    refuseReassignmentReason: [{ required: true, message: '请填写拒绝原因' }],
  }
  const radioChange = (e) => {
    console.log(e)
    // 切换重置
    form.value.staffId = ''
    form.value.refuseReassignmentReason = ''
    if (e == 1) {
      rules.staffId[0].required = true
      rules.refuseReassignmentReason[0].required = false
    }
    if (e == 1) {
      rules.staffId[0].required = false
      rules.refuseReassignmentReason[0].required = true
    }
  }
  const open = (record) => {
    console.log(record)
    records.value = record
    form.value = {
      id: records.value.id,
      examineStatus: 1,
      staffId: records.value.referenceUserId,
    }
    if (record.workType == 1) {
      labelName.value = '改派的交车人'
      rules.staffId[0].message = '请选择交车人'
    } else if (record.workType == 2) {
      labelName.value = '改派的还车人'
      rules.staffId[0].message = '请选择还车人'
    } else {
      labelName.value = '改派的换车人'
      rules.staffId[0].message = '请选择换车人'
    }
    console.log(rules)
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
  }
  const formRef = ref()
  const okLoading = ref(false)
  const validateFn = () => {
    okLoading.value = true
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          okLoading.value = false
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const handleBeforeOk = (done) => {
    return new Promise((resolve, reject) => {
      validateFn().then(() => {
        examineReassignment({ ...form.value })
          .then((res) => {
            console.log(res)
            Message.success(res.message)
            emit('ok')
            visible.value = false
            done()
            resolve()
          })
          .finally(() => {
            okLoading.value = false
          })
      })
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 0 10px !important;
  }
  :deep(.arco-form-item) {
    margin-bottom: 5px !important;
  }
  .form-items {
    margin: 16px 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .tlt {
    }
    .con {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      margin-right: 12px;
    }
  }
  .tlt-left {
    color: #4e5969;
    font-size: 14px;
    font-weight: 400;
  }
  .line {
    width: calc(100% - 20px);
    height: 1px;
    background: #f2f3f5;
    margin: 20px 10px;
  }
</style>
